<template>
  <div >
    <el-card shadow="always"  class="centerWrap" >
      <!-- 头部 -->
      <!-- 轮播图 -->
   <!--     <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small justify-center" text="2x">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel> -->
<<<<<<< HEAD
      <el-carousel  class="recommend"  height="466px">
=======
      <el-carousel  class="recommend"  height="466px" >
>>>>>>> yct
        <el-carousel-item v-for="(item,index) in carouselList" :key="item.id" >
          <a :href="item.link">
            <img :src="item.appAdvertiseUrl" alt="" />
          </a> 

        </el-carousel-item>
      </el-carousel>

      <!-- 导航组件 -->

      <navList />
    </el-card>
    <!-- s视频 -->

   
    <!-- 底部组件 -->
    <footer></footer>
  </div>
</template>

<script setup lang="ts">

import { onMounted ,ref} from "vue";
import {getCarousel,getDance} from '../../api/recommend/index'
import navList from "../recommend/navList/index.vue";
import smallVideo from '../../layout/videos/index.vue'
// import footer from "../../components/fotter/index.vue";

// 视频
const quantity = ref('1')
// 存储轮播数据
const carouselList =ref([])
onMounted(() => {
  getRecommend();
});
const getRecommend = async() => {
  const result = await getCarousel()
  console.log(result);
  carouselList.value = result.data
  
};

// 加载跟多视频 
const addMore=async()=>{
  quantity.value +=1
}
</script>

<style scoped>
.centerWrap {
  /* width: 1200px; */
  margin: 10px auto 0;
}

.recommend {
  width: 1200px;
  margin: 15px auto;
}
.recommend img{
  width: 1200px;
  height: 460px;
}


</style>
